<template>
    <el-card style="border: 0;">
        <!-- 操作栏 -->
        <div class="park-header">
            <el-button type="primary" icon="Plus" size="small" @click="handleAdd">
                新增模型
            </el-button>
        </div>

        <!-- 筛选区 -->
        <el-form :inline="true" :model="filterForm" class="filter-form" style="margin-bottom: 15px;">
            <el-form-item label="模型名称">
                <el-input v-model="filterForm.name" @input="val => filterForm.name = val" placeholder="请输入园区名称"
                    clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleFilter">查询</el-button>
                <el-button @click="resetFilter">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="parkList" :border="true" style="width: 100%">
            <el-table-column prop="name" label="园区名称" :align="center" />
            <!-- <el-table-column prop="city" label="所在城市" :align="center" /> -->
            <el-table-column prop="address" label="详细地址" :align="center" />
            <el-table-column prop="area" label="占地面积(㎡)" :align="center" width="150" />
            <el-table-column prop="description" label="园区描述" show-overflow-tooltip :align="center" />
            <el-table-column prop="createTime" label="创建时间" :align="center" />
            <el-table-column label="默认园区" width="100" :align="center" v-if="isAdmin">
                <template #default="scope">
                    <el-switch v-model="scope.row.isDefault" :active-value="true" :inactive-value="false"
                        @change="handleStatusChange(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="地理信息" width="100" :align="center">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleView(scope.row)">
                        地理信息
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220" :align="center">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
                        删除
                    </el-button>
                    <el-button size="small" type="primary" @click="handleViewBuildings(scope.row)">
                        查看楼栋
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import { ref, watch, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import request from '@/api/request';

// 接收父组件参数
const props = defineProps({
    parkId: {
        type: Object,
        default: false
    },
    parkName: {
        type: Object,
        default: () => ({})
    },
});

const parkId = ref(props.parkId);
const parkName = ref(props.parkName);
// 监听值变化
watch(
    () => props.parkId,
    (newVal) => {
        parkId.value = newVal;
    }
);
watch(
    () => props.parkName,
    (newVal) => {
        parkName.value = newVal;
    }
)
const parkList = ref([])
const filterForm = reactive({
    name: ''
})

// 初始化
onMounted(() => {
        //初始化查询当前园区的3DTiles模型
        // request.get("")
});

const center = 'center'


</script>

<style scoped>
.park-header {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
}

.filter-form {
    text-align: left;
    margin-bottom: 15px;
}

.pagination {
    margin-top: 15px;
    text-align: right;
}
</style>
